<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/css/swiper.min.css">
    <link rel="stylesheet" href="/css/store.css">
    <script src="js/swiper.min.js"></script>
    <script src="/js/miniprogram.js"></script>
    <script>
        var docEl = document.documentElement
        docEl.style.fontSize = (docEl.clientWidth / 750 * 100) + 'px'
    </script>
</head>
<body>
    <header class="header">
        <div class="logo"><img src="/img/logo.png"></div>
        <span class="nav-logo" onclick="toggleNav(event)"><img src="/img/nav-logo.png"></span>
        <div class="nav-warp" id="nav-warp">
            <a href="/" class="nav-cell">
                <span class="nav-cell-icon"><img src="/img/nav-icon-1.png"></span>
                <span class="nav-cell-txt">首页</span>
            </a>
            <a href="/brand_desc.html" class="nav-cell">
                <span class="nav-cell-icon"><img src="/img/nav-icon-2.png"></span>
                <span class="nav-cell-txt">品牌介绍</span>
            </a>
            <a href="/product_desc.html" class="nav-cell">
                <span class="nav-cell-icon"><img src="/img/nav-icon-3.png"></span>
                <span class="nav-cell-txt">产品介绍</span>
            </a>
            <a class="nav-cell" onclick="toggleNavProduct(this, event)" id="nav-cell-sub">
                <span class="nav-cell-icon"><img src="/img/nav-icon-4.png"></span>
                <span class="nav-cell-txt">产品报价</span>
            </a>
            <a href="/dealer_login.html" class="nav-cell">
                <span class="nav-cell-icon"><img src="/img/nav-icon-5.png"></span>
                <span class="nav-cell-txt">经销商登录</span>
            </a>
            <a href="/quailty_search.html" class="nav-cell">
                <span class="nav-cell-icon"><img src="/img/nav-icon-6.png"></span>
                <span class="nav-cell-txt">质保查询</span>
            </a>
            <a href="/example.html" class="nav-cell">
                <span class="nav-cell-icon"><img src="/img/nav-icon-7.png"></span>
                <span class="nav-cell-txt">案例展示</span>
            </a>
            <a href="/news.html" class="nav-cell">
                <span class="nav-cell-icon"><img src="/img/nav-icon-8.png"></span>
                <span class="nav-cell-txt">资讯活动</span>
            </a>
            <a href="/store.html" class="nav-cell">
                <span class="nav-cell-icon"><img src="/img/nav-icon-9.png"></span>
                <span class="nav-cell-txt">合作门店</span>
            </a>
        </div>
        <div class="sub-nav" id="sub-nav" style="display: none;">
            <a href="/quoted_category_transparent.html" class="nav-cell">
                <span class="nav-cell-txt">透明膜报价</span>
            </a>
            <a href="/quoted_category_color.html" class="nav-cell">
                <span class="nav-cell-txt">CA改色膜报价</span>
            </a>
        </div>
        <div class="search"><img src="/img/icon-search.png" alt=""></div>
        <script>
            function toggleNav(event) {
                event.stopPropagation()
                var dom = document.getElementById('nav-warp')
                var classes = dom.getAttribute('class').split(' ')
                if (classes.indexOf('active') > -1) {
                    dom.setAttribute('class', classes.filter(i => i !== 'active').join(' '))
                } else {
                    classes.push('active')
                    dom.setAttribute('class', classes.join(' '))
                }
                hideeNavProduct(document.getElementById('nav-cell-sub'))
            }
            document.addEventListener('click', (e) => {
                var dom = document.getElementById('nav-warp')
                var classes = dom.getAttribute('class').split(' ')
                if (classes.indexOf('active') > -1) {
                    dom.setAttribute('class', classes.filter(i => i !== 'active').join(' '))
                }
                hideeNavProduct(document.getElementById('nav-cell-sub'))
            })
            // 点击产品报价
            function toggleNavProduct(dom, e) {
                e.stopPropagation()
                var classes = dom.getAttribute('class').split(' ')
                if (classes.indexOf('active') > -1) {
                    hideeNavProduct(dom)
                } else {
                    showNavProduct(dom)
                }
            }
            function showNavProduct (dom) {
                var classes = dom.getAttribute('class').split(' ')
                classes.push('active')
                document.getElementById('sub-nav').style.display = 'block'
                dom.setAttribute('class', classes.join(' '))
            }
            function hideeNavProduct (dom) {
                var classes = dom.getAttribute('class').split(' ')
                classes = classes.filter(i => i !== 'active')
                document.getElementById('sub-nav').style.display = 'none'
                dom.setAttribute('class', classes.join(' '))
            }
        </script>
    </header>
    <div class="store">
        <div class="search-wrap">
            <div class="input">
                <input type="text" placeholder="输入关键词">
            </div>
            <div class="btn">
                <button>搜索</button>
            </div>
        </div>
        <div class="area">
            <div class="area-cell">
                <span class="name" onclick="areaSelect(0)">广东省</span>
                <span class="icon"><img src="/img/store-icon-1.png" alt=""></span>
            </div>
            <div class="area-cell">
                <span class="name" onclick="areaSelect(1)">广州市</span>
                <span class="icon"><img src="/img/store-icon-1.png" alt=""></span>
            </div>
            <div class="area-cell">
                <span class="name" onclick="areaSelect(2)">天河区</span>
                <span class="icon"><img src="/img/store-icon-1.png" alt=""></span>
            </div>
        </div>
        <div class="list" id="list">
            <div class="list-cell">
                <div class="img"><img src="/img/home-article-1.png" alt=""></div>
                <div class="wrap">
                    <h4 class="title">BLOCK(上海美罗城店) </h4>
                    <p class="address">山东省青岛市李沧区文昌路678号托普格尔汽车俱乐部</p>
                    <span class="icon">&gt;</span>
                </div>
            </div>
            <div class="list-cell">
                <div class="img"><img src="/img/store-default-img.png" alt=""></div>
                <div class="wrap">
                    <h4 class="title">BLOCK(上海美罗城店) </h4>
                    <p class="address">山东省青岛市李沧区文昌路678号托普格尔汽车俱乐部</p>
                    <span class="icon">&gt;</span>
                </div>
            </div>
            <div class="list-cell">
                <div class="img"><img src="/img/store-default-img.png" alt=""></div>
                <div class="wrap">
                    <h4 class="title">BLOCK(上海美罗城店) </h4>
                    <p class="address">山东省青岛市李沧区文昌路678号托普格尔汽车俱乐部</p>
                    <span class="icon">&gt;</span>
                </div>
            </div>
            <div class="list-cell">
                <div class="img"><img src="/img/store-default-img.png" alt=""></div>
                <div class="wrap">
                    <h4 class="title">BLOCK(上海美罗城店) </h4>
                    <p class="address">山东省青岛市李沧区文昌路678号托普格尔汽车俱乐部</p>
                    <span class="icon">&gt;</span>
                </div>
            </div>
            <div class="list-cell">
                <div class="img"><img src="/img/store-default-img.png" alt=""></div>
                <div class="wrap">
                    <h4 class="title">BLOCK(上海美罗城店) </h4>
                    <p class="address">山东省青岛市李沧区文昌路678号托普格尔汽车俱乐部</p>
                    <span class="icon">&gt;</span>
                </div>
            </div>
        </div>
        <!-- 弹窗 -->
        <div class="modal-area" id="modal-area">
            <div class="modal-area-wrap">
                <div class="name">所在地区<span class="close" onclick="closeModal()">+</span></div>
                <div class="tab" id="tab-area" onclick="tabChange(event)">
                    <div class="tab-cell active" tabIndex="0">广东省</div>
                    <div class="tab-cell" tabIndex="1">广州市</div>
                    <div class="tab-cell" tabIndex="2">天河区</div>
                </div>
                <div class="swiper-container swiper-container-detail">
                    <div class="swiper-wrapper swiper-wrapper-detail">
                        <div class="swiper-slide">
                            <div class="cell" onclick="cellSelect(event)">广东省</div>
                            <div class="cell active" onclick="cellSelect(event)">广东省</div>
                            <div class="cell" onclick="cellSelect(event)">广东省</div>
                            <div class="cell" onclick="cellSelect(event)">广东省</div>
                            <div class="cell" onclick="cellSelect(event)">广东省</div>
                            <div class="cell" onclick="cellSelect(event)">广东省</div>
                        </div>
                        <div class="swiper-slide">
                            <div class="cell" onclick="cellSelect(event)">广州市</div>
                            <div class="cell active" onclick="cellSelect(event)">广州市</div>
                            <div class="cell" onclick="cellSelect(event)">广州市</div>
                            <div class="cell" onclick="cellSelect(event)">广州市</div>
                            <div class="cell" onclick="cellSelect(event)">广州市</div>
                            <div class="cell" onclick="cellSelect(event)">广州市</div>
                        </div>
                        <div class="swiper-slide">
                            <div class="cell" onclick="cellSelect(event)">天河区</div>
                            <div class="cell active" onclick="cellSelect(event)">天河区</div>
                            <div class="cell" onclick="cellSelect(event)">天河区</div>
                            <div class="cell" onclick="cellSelect(event)">天河区</div>
                            <div class="cell" onclick="cellSelect(event)">天河区</div>
                            <div class="cell" onclick="cellSelect(event)">天河区</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            // 相等关系 tabIndex === swiperInit.activeIndex
            var swiperInit = null


            // 点击切换tab
            function tabChange(e) {
                var tabIndex = e.target.getAttribute('tabIndex')
                swiperInit.slideTo(tabIndex)
            }

            // 弹窗关闭
            function closeModal () {
                document.getElementById('modal-area').style.display = 'none'
                document.body.style.overflow = 'unset'
            }

            function cellSelect(e) {
                // 添加active
                var targetTabCellDom = e.target
                var tabCellDoms = [].slice.call(targetTabCellDom.parentNode.children)
                tabCellDoms.forEach(item => {
                    var classes = item.getAttribute('class').split(' ')
                    classes = classes.filter(i => i!== 'active')
                    item.setAttribute('class', classes.join(' '))
                })
                targetTabCellDom.setAttribute('class', targetTabCellDom.getAttribute('class') + ' active')

                // 切换tab
                var tabIndex = swiperInit.activeIndex
                if (tabIndex != 2) {
                    swiperInit.slideTo(tabIndex + 1)
                } else {
                    closeModal()
                }
            }

            function areaSelect(tabIndex) {
                document.getElementById('modal-area').style.display = 'block'
                document.body.style.overflow = 'hidden'
                if (!swiperInit) {
                    swiperInit = new Swiper('.swiper-container-detail', {
                        speed: 300,
                        on: {
                            slideChange: function() {
                                var tabIndex = this.activeIndex
                                var tabCellDoms = [].slice.call(document.getElementById('tab-area').children)
                                tabCellDoms.forEach(item => {
                                    var classes = item.getAttribute('class').split(' ')
                                    classes = classes.filter(i => i!== 'active')
                                    item.setAttribute('class', classes.join(' '))
                                })
                                var targetTabCellDom = tabCellDoms.find(item => item.getAttribute('tabIndex') == tabIndex)
                                targetTabCellDom.setAttribute('class', targetTabCellDom.getAttribute('class') + ' active')
                            }
                        }
                    })
                }
                swiperInit.slideTo(tabIndex)
            }

        </script>
        <!-- 分页 -->
        <script>
            function debounce(func, wait) {
                var timeout;
                return function () {
                    var context = this;
                    var args = arguments;
                    clearTimeout(timeout)
                    timeout = setTimeout(function(){
                        func.apply(context, args)
                    }, wait);
                }
            }
            // 总数据
            var count = 15
            // 每页条数
            var size = 5
            var page = 1
            var totalPage = Math.ceil(count / size)
            document.getElementById('list').onscroll = debounce(function(){
                var viewH = this.clientHeight
                var contentH = this.scrollHeight
                var scrollTop = this.scrollTop;
                if(page < totalPage && scrollTop / (contentH - viewH) > 0.90){
                    page = page + 1
                    // 这里需要ajax请求
                    fetch(`/test?page=${page}&size=${size}`).then(res => {
                        // 请求的状态码
                        var status = res.status
                        this.innerHTML = this.innerHTML + `
                        <div class="list-cell">
                            <div class="img"><img src="/img/home-article-1.png" alt=""></div>
                            <div class="wrap">
                                <h4 class="title">BLOCK(上海美罗城店) </h4>
                                <p class="address">山东省青岛市李沧区文昌路678号托普格尔汽车俱乐部</p>
                                <span class="icon">&gt;</span>
                            </div>
                        </div>
                        <div class="list-cell">
                            <div class="img"><img src="/img/store-default-img.png" alt=""></div>
                            <div class="wrap">
                                <h4 class="title">BLOCK(上海美罗城店) </h4>
                                <p class="address">山东省青岛市李沧区文昌路678号托普格尔汽车俱乐部</p>
                                <span class="icon">&gt;</span>
                            </div>
                        </div>
                        <div class="list-cell">
                            <div class="img"><img src="/img/store-default-img.png" alt=""></div>
                            <div class="wrap">
                                <h4 class="title">BLOCK(上海美罗城店) </h4>
                                <p class="address">山东省青岛市李沧区文昌路678号托普格尔汽车俱乐部</p>
                                <span class="icon">&gt;</span>
                            </div>
                        </div>
                        <div class="list-cell">
                            <div class="img"><img src="/img/store-default-img.png" alt=""></div>
                            <div class="wrap">
                                <h4 class="title">BLOCK(上海美罗城店) </h4>
                                <p class="address">山东省青岛市李沧区文昌路678号托普格尔汽车俱乐部</p>
                                <span class="icon">&gt;</span>
                            </div>
                        </div>
                        <div class="list-cell">
                            <div class="img"><img src="/img/store-default-img.png" alt=""></div>
                            <div class="wrap">
                                <h4 class="title">BLOCK(上海美罗城店) </h4>
                                <p class="address">山东省青岛市李沧区文昌路678号托普格尔汽车俱乐部</p>
                                <span class="icon">&gt;</span>
                            </div>
                        </div>`
                    })
                }
            }, 30)
        </script>
    </div>
    <footer class="footer">
        <!-- <div class="link">
            <a href="/quailty_search.html" class="link-cell">质保查询</a>
            <a href="/dealer_login.html" class="link-cell">经销商登录</a>
            <a href="/quoted_part.html" class="link-cell">产品报价</a>
            <a href="/product_desc.html" class="link-cell">产品介绍</a>
        </div> -->
        <div class="phone">服务热线：<a href="tel:4001 618 615">4001 618 615</a></div>
        <div class="company">运营商:拜亚(山东)薄膜有限公司</div>
        <div class="beian">粤ICP备05108632号- 13</div>
    </footer>
    <div class="mini-menu">
        <a href="/" class="cell active">
            <div class="icon"></div>
            <div class="name">首页</div>
        </a>
        <a href="/product_desc.html" class="cell">
            <div class="icon"></div>
            <div class="name">产品</div>
        </a>
        <a href="/quoted.html" class="cell">
            <div class="icon"></div>
            <div class="name">报价</div>
        </a>
        <a href="/example.html" class="cell">
            <div class="icon"></div>
            <div class="name">案例</div>
        </a>
        <a href="/mine.html" class="cell">
            <div class="icon"></div>
            <div class="name">我的</div>
        </a>
    </div>
</body>
</html>